<template>
    <el-dialog :before-close="handleClose"  :close-on-click-modal="false" title="智能汇报" :visible.sync="dialogVisible">
        <div class="bg" ref="picture" style="padding: 15px; margin: -18px;" >
            <!-- <div class="report-header" >
                友好信息
                <i><img src="../../../assets/icon/talk.png"></i>
            </div> -->
            <p>尊敬的
                <span class="basenumber">{{ report.base.user_name }}</span>
            ，</p>
            <p>距离您
                <span class="report-link" @click="reportRouterPush('Audit')">上次登录</span>
                已经过去了
                <span class="basenumber">{{getReportTimeString()}}</span>
                ，</p>
            <p>让我们看看这段时间内发生了哪些事情。</p>
                
            <div class="report-header">
                态势汇总
                <i><img src="../../../assets/icon/pro.png"></i>
            </div>
            <p>
                我们累计检测出了
                <span class="threatnumber">{{report.threat.behavior}}</span>
                个值得关注的异常
                <span class="report-link" @click="reportRouterPush('Menace_event')">行为事件</span>
                ，通过自动分析技术，合并为
                <span class="threatnumber">{{report.threat.threat_all}}</span>
                个
                <span class="report-link" @click="reportRouterPush('Menace_list')">安全威胁</span>
                ，
                <span v-if="report.threat.threat_ignore">
                    其中有
                    <span class="threatnumber">{{report.threat.threat_ignore}}</span>
                    个
                    <span class="report-link" @click="reportRouterPush('Menace_list')">威胁</span>
                    已经得到了处置
                </span>
                <span v-if="!report.threat.threat_ignore"> 没有任何威胁被处置。</span>
            </p>
            <p>                        
                未被处置的
                <span class="report-link" @click="reportRouterPush('Menace_list')">威胁</span>
                <span v-if="report.threat.tactics">
                    运用了
                    <span v-for="tactic in report.threat.tactics">
                        <span v-if="tactic != report.threat.tactics[0]">，</span>
                        <span class="threatnumber">{{ tactic }}</span>
                    </span>
                    战术，
                </span>
                <span v-if="report.threat.technique">
                    使用了
                    <span v-for="tech in report.threat.technique">
                        <span v-if="tech != report.threat.technique[0]">，</span>
                        <span class="threatnumber">{{ tech }}</span>
                    </span>
                    技术。
                </span>
            </p>
            <p>
                <div class="chart"><p>严重程度</p><chart-pie ref="threatextent" /></div>
                <div class="chart"><p>检测名</p><chart-pie ref="threatname" /></div>
            </p>
            <p>受影响的
                <span class="report-link" @click="reportRouterPush('EndPoint_TerminalManage')">终端系统</span>
                如下表所示：</p>
            <el-table :data="report.threat.agent" :header-cell-style="{ background: '#f5f5f5' }" size="mini">
                <el-table-column label="内部IP" min-width="10%" prop="cip" />
                <el-table-column label="终端名" min-width="10%" prop="agent_name" />
                <el-table-column label="主机名" min-width="30%" prop="host_name" />
                <el-table-column label="操作系统" min-width="15%" prop="os" />
            </el-table>
            <p>受影响的用户如下：</p>
            <div v-for="user in report.threat.user" class="effect">
                {{ user }}
            </div>
            <p>您应该尽快对上述安全
                <span class="report-link" @click="reportRouterPush('Menace_list')">威胁</span>
                、受影响的
                <span class="report-link" @click="reportRouterPush('EndPoint_TerminalManage')">终端系统</span>
                和用户发起审计活动并完成处置，排除网络安全隐患。</p>
            <div class="report-header">
                操作
                <!-- <i><img src="../../../assets/icon/submit.png"></i> -->
            </div>
                <p>
                    <el-button size="small" @click="downloadImg()">保存为图片</el-button>
                    <el-button size="small" @click="downloadPdf()">保存为 PDF</el-button>
                </p>
            <div class="report-header" >
                提示
                <i><img src="../../../assets/icon/gan.png"></i>

            </div>
           
            <p>如果您不想看到智能汇报，可将顶部导航栏中的智能汇报项设置为关闭状态。</p>
            <p>如果您对本次智能汇报的内容有任何疑问，请咨询技术支持人员以获得权威解读。</p>
        </div>
    </el-dialog>
</template>
  
<script>
import { mapGetters } from "vuex";
import ChartPie from "@/components/charts/ChartPie";
import html2canvas from 'html2canvas';
import jsPdf from 'jspdf';
export default {
    name: "LoginReport",
    components: {ChartPie},
    mounted(){
        this.report = JSON.parse(localStorage.getItem("loginReport"));
        this.report.threat=this.report.threat.threat;
        const pietimer = setInterval(()=>{
            if(this.$refs!=undefined)
            {
                this.$refs.threatextent.created(this.getPie(this.report.threat.severity))
                this.$refs.threatname.created(this.getPie(this.report.threat.detection))
                clearInterval(pietimer);
            }
        }
        ,2000);
    },
    data() {
        return {
            dialogVisible: false,
            loading: false,
            org_id: "",
            report:{
            }
        }
    },
    computed: mapGetters(["UserInfo"]),
    methods: {
        handleClose(done) {
            localStorage.setItem("needLoginReport", false);
            localStorage.removeItem("loginReport");
            done();
        },
        reportRouterPush(route) {
            localStorage.removeItem("loginReport");
            let routeData = this.$router.resolve({name:route});
            window.open(routeData.href, '_blank');
        },
        getReportTimeString() {
            const d=this.report.base.interval.days;
            const h=this.report.base.interval.hours;
            const m=this.report.base.interval.mins;
            let str="";
            str=d?d+" 天 ":"";
            str=h?str+h+" 时 ":str;
            str=m?str+m+" 分 ":str;
            return str;
        },
        getPie(data) {
            const objectToChartArr=(obj)=>{
                let arr=[];
                Object.keys(obj).map(key=>{
                    arr.push({name:String(key),value:obj[key]})
                })
                return arr;
            };
            const pie = {
                series: [
                    {
                        name: "占比",
                        type: "pie",
                        radius: "50%",
                        data: objectToChartArr(data),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            };
            if (data == this.report.threat.severity)
            pie.series[0].itemStyle={
                color: function(params){
                    switch (params.name){
                        case "紧急" : return "#b1b";
                        case "高" : return "#d00";
                        case "中" : return "#fac858";
                        case "低" : return "#91cc75";
                    }
                }
            }
            return pie;
        },
        show() {
            this.dialogVisible = !this.dialogVisible;
        },
        downloadImg() {
            html2canvas(this.$refs.picture).then((canvas) => {
                let now = new Date();
                let year = now.getFullYear();
                let month = now.getMonth() + 1;
                let day = now.getDate();

                const link = canvas.toDataURL("image/jpeg");
                let aLink = document.createElement("a");
                aLink.download = 'ME-' + year + '-' + month + '-' + day + '-SmartReport.jpg';
                aLink.href = link;
                aLink.click();
            });
        },       
        downloadPdf() {
            html2canvas(this.$refs.picture).then((canvas) => {
                //const link = canvas.toDataURL("image/jpg");
                //const pageWidth=canvas.width;
                //const pageHeight=1080;
                //const pageGap=10;
                //const contentHeight = canvas.height;
                //let leftHeight=contentHeight;
                //let position = 0;
                //const pdf=new jsPdf('p','px',[pageWidth,pageHeight]);
                //if (leftHeight < pageHeight) {
                //    pdf.addImage(link, 'JPEG', 0, position,pageWidth,contentHeight);
                //}
                //else {
                //    while (leftHeight > 0) {
                //        pdf.addImage(link, 'JPEG', 0, position,pageWidth,contentHeight);
                //        leftHeight -= pageHeight;
                //        position -= pageHeight +pageGap;
                //        if (leftHeight > 0) {
                //            pdf.addPage()
                //        }
                //    }
                //}
                //pdf.save('123.pdf');

                let contentWidth = canvas.width
                let contentHeight = canvas.height
                let pageHeight = contentWidth / 592.28 * 841.89
                let leftHeight = contentHeight
                let position = 0
                let imgWidth = 595.28
                let imgHeight = 592.28 / contentWidth * contentHeight
                let pageData = canvas.toDataURL('image/jpeg', 1.0)
                let PDF = new jsPdf('', 'pt', 'a4')
                
                let now = new Date();
                let year = now.getFullYear();
                let month = now.getMonth() + 1;
                let day = now.getDate();

                if (leftHeight < pageHeight) {
                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                } else {
                    while (leftHeight > 0) {
                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89
                        if (leftHeight > 0) {
                            PDF.addPage()
                        }
                    }
                }
                PDF.save('ME-' + year + '-' + month + '-' + day + '-SmartReport.pdf')
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.bg{
    background: url("../../../assets/icon/bg2.png") no-repeat;
    background-size:40%;
    background-position-x: right;
    background-position-y: 0px;
}
span {
    font-size: 14px;
}
i{
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    img{
        height: 100%;
        width: 100%;
    }
}
.report-header {
    color: rgb(34, 92, 125);
    font-size: 16px;
    font-weight: 750;
    border-bottom: 1px solid rgb(189, 189, 189);
}
.save:hover{
    cursor:pointer;
    color: #d00;
}
.threatnumber{
    color: #d00
}
.basenumber{
    color: rgb(23, 76, 145);
}
.effect{
    border-bottom: 1px solid #EBEEF5;
    margin-bottom: 5px;
}
.effect:hover{
    background-color: #F5F7FA;
}
.report-link:hover{
    color: rgb(23, 76, 145);
    cursor: pointer;
}
.chart{
    display: inline-block;
    width: 300px;
    height: 200px;
    margin-bottom: 30px;
}
</style>